<script lang="ts" setup>
import { useToggle } from '@vueuse/core'
import { tableProps } from '@/constants/component-props'
import { useCourseTable, useExperimentList } from './composables/useCourseTable'

import type { CourseModel } from '@/apis/course'
import type { TableSlotCell } from '@/types/components-tool'

import ExperimentList from './ExperimentList.vue'

const { columns, courses } = useCourseTable()
const [listVisible, toggleVisible] = useToggle()
const { courseName, experiments, isFetching, toggleCourse } = useExperimentList(toggleVisible)

const courseID = defineModel<number>('modelValue', { required: true })
const updateCourseID = ([id]: (number | string)[]) => (courseID.value = id as number)
</script>

<template>
  <a-table
    v-bind="tableProps"
    bordered
    class="w-full"
    row-key="id"
    :data="courses"
    :selected-keys="[courseID]"
    @update:selected-keys="updateCourseID"
    :row-selection="{ type: 'radio' }"
    :columns
  >
    <template #course="{ record: { id, name } }: TableSlotCell<CourseModel>">
      <a-button size="mini" type="text" @click="toggleCourse(id, name)">查看实验</a-button>
    </template>
  </a-table>

  <a-modal
    simple
    hide-title
    :footer="false"
    :mask-style="{ backgroundColor: 'rgba(var(--gray-5), 0.5)' }"
    :modal-style="{ padding: 0 }"
    :visible="listVisible"
    @cancel="toggleVisible(false)"
  >
    <ExperimentList :loading="isFetching" :experiments :courseName />
  </a-modal>
</template>
